<template>  
  <div class="note-library">
   <div class="header">  
   <!-- 第一行：按钮、查询框和选择框 -->
   <div class="top-row">
       <!-- 新增：选择框放在发现按钮旁边 -->
       <div class="select-container">  
       <el-select v-model="queryStatus" placeholder="请选择笔记类型" @change="queryInfo" >  
         <el-option label="所有笔记类型" value=""></el-option>
         <el-option label="新国风流行" value="新国风流行"></el-option>
         <el-option label="传统音乐" value="传统音乐"></el-option>
         <el-option label="戏曲文化" value="戏曲文化"></el-option>
         <el-option label="主题文化" value="主题文化"></el-option>
         <el-option label="地域特色" value="地域特色"></el-option> 
       </el-select>  
     </div>&nbsp;&nbsp;
     <el-button size="large" icon="Search" @click="navigateTo('/Note')">发现</el-button>&nbsp;&nbsp;   
     <el-button size="large" icon="Position" @click="navigateTo('/note-upload')">发布笔记</el-button>   
 
     <!-- 查询部分 -->
     <div class="query">  
       <el-input placeholder="请输入笔记标题" v-model="queryStr" class="input-with-button" clearable></el-input>  
       <el-button size="medium" round @click="queryInfo">查询</el-button>  
     </div>  
   </div>
 </div>
 </div>
 
 <!-- 下部容器 -->  
 <div class="bottom-container">  
     <div class="left-container">  
       <el-row gutter="30" style="width:100%">   
         <el-col v-for="note in tableData" :key="note.id" :span="6"  class="note-item">  
           <el-card class="note-card">  
             <div class="image-wrapper">
             <img :src="'http://localhost:8080/images/upload/' + note.image"  style="cursor: pointer;" alt="note Cover" class="note-cover"  @click="opennotedetail(note)"/> 
           </div>
             <p>{{  note.title }}</p>
             <p>#{{ note.note_type }}</p>
             <div class="note-info"> 
               <el-avatar :src="'http://localhost:8080/images/upload/'+ note.profile_picture"></el-avatar>
               <!-- <img :src="'http://localhost:8080/images/upload/' + note.profile_picture" alt="note Cover" class="note-cover" />  -->
               {{  note.user_name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon><View /></el-icon>&nbsp;{{ note.view_count }}&nbsp;&nbsp;
             </div>  
           </el-card>  
         </el-col>  
       </el-row> 

     </div> 
 
     <div class="right-container">  
       <div class="top-10-card">  
         <h3>热门笔记排行榜</h3>
         <el-list>  
           <el-list-item v-for="(note, index) in sortedTableData" :key="note.id" class="top10-item" @click="opennotedetail(note)">
          <div>{{ index + 1 }}. {{ note.title }} (#{{ note.note_type }}) -- &nbsp;<el-icon><View /></el-icon> {{ note.view_count }}次</div>
          </el-list-item>
         </el-list>  
       </div>  
     </div>  
   </div> 
   <div class="pagination-container"> 
    <el-pagination  
           @current-change="handlePageChange"  
           :current-page.sync="currentPage"  
           :page-size="pageSize"  
           :total="totalNotes"  
           layout="total, prev, pager, next"  
           class="pagination"  
         />  
   </div>
 </template>
 
 
 <script>  
 import axios from 'axios';  
 export default{
   data(){
       return{
         queryStr: "",  //笔记标题查询
         queryStatus: "",   //笔记类型查询
         tableData: [], // 存储已发布的笔记数据
         queryData: [],
         notes:[],
         imageUrl:" "   , //图片URL地址
         totalNotes: 0,  
          currentPage: 1,  
       pageSize: 12,  
       clickedCard: null,   
       originalData: [],
       publishedNoteCount:0,  
     };  
   },
 
   methods: {  
       navigateTo(route) {  
           this.$router.push(route);  
       },  
       //进入笔记详情页面
    opennotedetail(note){
     sessionStorage.setItem('note_create_id', note.note_create_id);
     this.navigateTo('/note-detail', note);
     this.$http.post("/v1/NoteCreate/View/" + note.note_create_id);
   },
 
   
   
   queryInfo() {
   if (this.queryStr.trim().length > 0 || this.queryStatus !== "") {
     this.tableData = this.originalData.filter(item => {
       const matchesTitle = this.queryStr.trim().length === 0 || item.title.includes(this.queryStr.trim());
       const matchesStatus = this.queryStatus === "" || item.note_type === this.queryStatus;
       return matchesTitle && matchesStatus;
     });
   } else {
     this.tableData = this.originalData; // 当查询条件为空时，显示所有数据
   }
   console.log("Filtered Table Data:", this.tableData);
   this.totalNotes = this.tableData.length; // 更新总笔记数以供分页
 },
 
       // 获取所有已发布的笔记  
       getAllPublishedNotes() {  
       this.$http.get("/v1/NoteCreateinfouser", {  
         params: { note_status: '审核通过' } // 添加过滤参数  
       }).then((response) => {  
         this.originalData = response.data.list || []; // 存储原始数据  
         this.updateTableData(); // 更新表格数据显示  
       });  
     },  
 
      // 根据当前页码更新表格数据  
      updateTableData() {  
       const start = (this.currentPage - 1) * this.pageSize; // 计算当前页的数据起始索引  
       const end = start + this.pageSize; // 计算当前页的数据结束索引  
       this.tableData = this.originalData.slice(start, end); // 根据索引切割数组进行分页  
       this.totalNotes = this.originalData.length; // 更新总笔记数  
     },  
 
      // 获取热门笔记排行榜
         fetchNotestop(){
           fetch('http://localhost:8080/v1/NoteCreate/view_count') // 获取笔记信息，按照排行  
       .then(response => {  
         if (!response.ok) {  
           throw new Error('Network response was not ok');  
         }  
         return response.json();  
       })  
       .then(data => {  
         this.notes = data   
       })  
       .catch(error => console.error('Error fetching notes:', error));  
     },
     
 
     // 处理页码变化  
     handlePageChange(newPage) {  
       this.currentPage = newPage; // 更新当前页  
       this.updateTableData(); // 刷新当前页的数据  
     }, 

      //获取笔记的收藏数量
      fetchpublishedNoteCount() {  
      axios.get(`/v1/NoteCollectionnoteid/count`, {  
        params: { note_create_id: this.note_create_id }  
      }).then(response => {  
        this.publishedNoteCount = response.data;  
      });  
    },  
     
   },  
     
 
   computed: {
   sortedTableData() {
     return this.notes.slice(0, 10);   //只取前十条
   }
 },
   
      
     mounted() { 
     this.getAllPublishedNotes();
     this.fetchNotestop(); //查询排行榜
     this.fetchpublishedNoteCount();   //获取收藏笔记数量
 
    }
  }
 </script>  
 
 <style scoped>  
 body {
  display: flex;  
  flex-direction: column;  
  min-height: 100vh; /* 确保最小高度为100vh */  
  margin: 0; /* 去掉默认边距 */ 
 }
 .note-library {  
   padding: 20px; /* 主容器内边距 */  
   margin-left: 150px;  /* 左边距 */  
   margin-right: 150px; /* 右边距 */  
 }  
 
 .bottom-container {  
   display: flex; /* 使用 Flexbox 布局 */  
   height: 70%; /* 下部容器的高度 */  
   margin-top: 30px; /* 增加与上部容器的垂直间距 */  
 }   
 
 .left-container {  
   flex: 0 0 70%; /* 左侧容器占70%宽度 */  
   height: 100%; /* 使容器高度充满下部容器 */  
   display: flex; /* 使用flex布局 */ 
   flex-direction: column; /* 垂直排列子元素 */
  justify-content: space-between; /* 分隔子元素，使得顶部和底部有空间 */
  align-items: center; /* 水平居中所有子元素 */ 
   flex-wrap: wrap; /* 允许换行，以适应内容 */  
   align-items: flex-start; /* 垂直对齐顶部 */  
   padding: 30px; /* 可以添加内边距 */  
   border-right: 4px solid #e0e0e0; /* 添加右边框以区分左右容器 */ 
 }  
 
 .right-container {
  flex: 0 0 25%; /* 增加右边容器宽度为30% */
  overflow-y: auto; /* 如果内容超出，允许滚动 */
  padding: 10px; /* 右侧容器内边距 */
  margin: 0 20px; /* 与左边容器的间距 */
}
 .note-card {
   width: 100%;
   height: auto; /* 让卡片高度自适应内容 */
   transition: transform 0.3s, box-shadow 0.3s; /* 平滑的悬停效果 */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer; /* 添加手型图标，表示可点击 */
   border: 1px solid #e0e0e0; /* 添加边框以区分卡片 */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
   margin-bottom: 15px; /* 添加底部间距 */
 }
 
 .note-card:hover {
   transform: scale(1.02); /* 悬停时放大 */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 悬停时添加更深的阴影 */
 }
 
 .note-cover {
   width: 100%; /* 封面图片宽度 */
   height: 170px; /* 自动高度以保持图片比例 */
   border-radius: 8px; /* 圆角边框 */
 }
 
 .note-info {
   text-align: center; /* 信息文本居中 */
   margin-top: 1px;
   padding: 10px; /* 设置内边距 */
 }
 
 .note-item {
   width: 25%; /* 设置每个卡片的宽度为25% */
   margin-bottom: 15px; /* 设置底部间距 */
   display: flex;
   justify-content: center; /* 水平居中内容 */
   box-sizing: border-box; /* 防止边距影响整体宽度 */
 }
 
 .image-wrapper {  
   width: 100%;  
   height: 100%;  
   overflow: hidden; /* 确保隐藏溢出部分 */
     
 }  
 
 
 
 .note-info {  
   text-align: center; /* 信息文本居中 */  
   padding: 10px 0; /* 设置上下填充 */  
 }  
 
 .top-10 {  
   padding: 60px; /* TOP10 容器的内边距 */ 
   text-align: center; /* 添加这一行来居中标题 */ 
 }  
 .top-10-card {
  padding: 20px; /* 增加内边距 */
  text-align: center; /* 文本居中 */
  margin-top: 60px;
}
 
 .top10-item {  
   padding: 30px; /* 每个榜单项的内边距 */  
   text-align: left; /* 左对齐排行榜文本 */  
   cursor: pointer; /* 指示可以点击的项 */  
 }  
 
 .header {
  width: 100%; /* 头部宽度 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中所有子元素 */
  align-items: center; /* 垂直居中所有子元素 */
  margin-top: 10px;
}
 
 .top-row, .bottom-row {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   width: 100%;  
 }  
 
 .top-row {
  display: flex;
  align-items: center;
  width: 80%; /* 限制宽度并允许居中 */
  max-width: 1200px; /* 最大宽度，防止过大 */
  margin: 0 auto; /* 水平居中 */
}
 
 .select-container {
   width: 150px; /* 增加选择框的宽度 */
   margin-right: 50px; /* 选择框与发现按钮之间的间距 */
 }
 
 .el-select .el-input {
   width: 100%; /* 使输入框宽度与选择框一致 */
 }
 
 .el-button {
   margin-right: 20px; /* 按钮之间的间距 */
 }
 
 .query {  
   display: flex;  
   align-items: center;  
   margin-left: 30px; /* 调整查询框与按钮之间的间距 */  
 }  
 
 .input-with-button {  
   flex: 1; /* 输入框占据剩余空间 */  
   margin-right: 35px; /* 与按钮之间的间距 */  
 }  
 
 .pagination { 
  margin: 20px auto; /* 分页居中，距离上方20px */  
  text-align: left; /* 分页文本左对齐 */   
  bottom: 5px; 
  position: fixed;
  position: relative !important;
  left: auto !important;
  bottom: -210px !important;
 }  
 
 .select-container {  
   width: 20%; /* 确保选择框居中显示 */  
 }  
 .footer + .pagination {  
  margin-bottom: 5px; /* 页脚与分页之间的间距 */  
}  
 </style>
